<script setup name="home">
import { ref, onMounted, nextTick, toRaw } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { computed } from 'vue';
import { useStore } from 'vuex';
import MyFooter from '../../components/MyFooter/index.vue';
import MyTopNav from '../../components/MyTopNav/index.vue';
import Icon from '../../components/icon/index.vue';
import * as cartApi from '../../api/cart';
// 变量
const store = useStore();
const router = useRouter();
const route = useRoute();
const loading = ref(false);

const header = ref(null);
const height = ref(false);
const pageList = ref(route.matched);
// console.log(pageList.value);
const pageIndex = ref(-1);
// console.log(toRaw(route).path.value);
// 请求
(async function() {
  loading.value = true;
  await store.dispatch('classify/updateClassifyInfo');
  store.dispatch('cart/updateCartList');
  loading.value = false;
})();

// 跳转二级页面
function goOtherPages(id, i) {
  // pageIndex.value = i;
  // store.dispatch('second/updateSecondList', { id });
  router.push({
    path: `/category/${id}`,
  });
}
// 跳转首页
function goHome() {
  pageIndex.value = -1;
  router.push('/home');
}

// 跳转三级页面
function goSubCategory(id) {
  router.push({
    path: `/category/sub/${id}`,
  });
  // store.dispatch('second/updateSubCategoryList', id);
}
// 吸顶
function scroll(value) {
  if (value.scrollTop > 150) {
    height.value = true;
    // headerInfoVisible.value = true;
    // console.log(123);
  }
  if (value.scrollTop <= 150) {
    // headerInfoVisible.value = false;
    height.value = false;
  }
}
// 删除购物车
async function onDeleteCart(id) {
  await cartApi.DeleteCart(id);
  store.dispatch('cart/updateCartList');
}
// 跳转购物车
function goCart() {
  router.push('/cart');
}

// 主页分类信息
const classifyInfo = computed(() => store.state.classify.classifyInfo);
// 主页购物车列表
const cartList = computed(() => store.state.cart.cartList);
// 二级页面
const secondList = computed(() => store.state.second.secondList);
</script>

<template>
  <!-- 顶部导航 -->
  <my-top-nav />
  <!-- 吸顶 -->
  <el-affix @scroll="scroll">
    <div
      v-loading.fullscreen.lock="loading"
      :class="{
        ceiling: true,
        height1: !height,
        height2: height,
      }"
    >
      <div class="ceiling-container">
        <!-- logo  -->
        <div class="logo1">
          <a href="#/"></a>
        </div>
        <!-- 标签 -->

        <div class="mainnav">
          <span class="index" @click="goHome">首页</span>
          <div
            class="tag"
            v-for="item in classifyInfo"
            :key="item.id"
          >
            <span @click="goOtherPages(item.id, i)">{{ item.name }}</span>
            <el-card class="box-card" :body-style="{display: 'flex'}">
              <div
                v-for="str in item.children"
                :key="str.id"
                class="drop-down-box"
                @click="goSubCategory(str.id)"
              >
                <div class="img-warp">
                  <img :src="str.picture" alt="">
                </div>
                <span>{{ str.name }}</span>
              </div>
            </el-card>
          </div>

        </div>
        <!-- 品牌和专题 -->
        <div class="brand">
          <span class="line">|</span>
          <span>品牌</span>
          <span>专题</span>
        </div>

      </div>
    </div>
  </el-affix>
  <!-- 头部 -->
  <header
    v-loading.body="loading"
  >
    <div class="header-container" v-loading.fullscreen.lock="loading">
      <!-- logo  -->
      <div class="logo1">
        <a href="#/"></a>
      </div>
      <!-- 标签 -->

      <div class="mainnav">
        <span class="index" @click="goHome">首页</span>
        <div
          class="tag"
          v-for="(item, i) in classifyInfo"
          :key="item.id"
        >
          <span @click="goOtherPages(item.id, i)">{{ item.name }}</span>
          <el-card class="box-card" :body-style="{display: 'flex'}">
            <div
              v-for="str in item.children"
              :key="str.id"
              class="drop-down-box"
              @click="goSubCategory(str.id)"
            >
              <div class="img-warp">
                <img :src="str.picture" alt="">
              </div>
              <span>{{ str.name }}</span>
            </div>
          </el-card>
        </div>


      </div>
      <!-- 搜索框 -->
      <div class="inp-warp">
        <el-icon class="icon-search"><Search /></el-icon>
        <input
          type="text"
          class="inp"
          placeholder="搜一搜"
        >
      </div>
      <!-- 购物车 -->
      <el-dropdown>
        <el-badge
          :value="cartList.totalQuantity"
          class="car"
          @click="goCart"
        >
          <icon name="car" size="25" class="icon-car"/>
        </el-badge>
        <template #dropdown >
          <el-dropdown-menu class="car-warp" v-show="cartList.totalPrice !== 0">
            <div class="car-main">
              <div
                class="car-item"
                v-for="item in cartList.result"
                :key="item.id"
              >
                <div class="car-img">
                  <img :src="item.picture">
                </div>
                <div class="details">
                  <div>{{ item.name }}</div>
                  <div>
                    <span>{{ item.attrsText }}</span>
                  </div>
                </div>
                <div class="price">
                  <div>¥{{ item.price }}</div>
                  <div>x{{ item.count }}</div>
                </div>
                <div class="close" @click="onDeleteCart(item.skuId)">
                  <el-icon class="icon"><Close /></el-icon>
                </div>
              </div>
            </div>
            <div class="car-footer">
              <div class="in-all">
                <div>共{{ cartList.totalQuantity }}件商品</div>
                <div>¥{{ cartList.totalPrice }}</div>
              </div>
              <el-button
                class="car-btn"
                type="primary"
                size="large"
              >
                去购物车结算
              </el-button>
            </div>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </header>
  <div class="router-view">
    <router-view />
  </div>
  <div>
    <my-footer />
  </div>
</template>

<style scope lang="scss">

$color : #5bb79c;
.icon {
  vertical-align: middle;
}
.warp {
  width: 1240px;
  margin: 0 auto;
}

.header {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 132px;
  z-index: 9999;
}
.logo {
  background-image: url('http://erabbit.itheima.net/img/logo.0940ebb5.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 200px;
  height: 100%;
}

.menus {
  display: flex;
  flex: 1;
  // margin: 20px;
  align-items: center;
  padding: 8px 0;


  &:hover {
    border-bottom: 1px solid $color;

    .box-card {
      height: 132px;
      opacity: 1;
      z-index: 999;
    }

    >span {
      color: $color;
      cursor: pointer;
    }
  }

  .box-card {
    position: absolute;
    top: 100px;
    left: 0px;
    @extend .warp;
    background-color: #fff;
    transition: all .2s .1s;
    height: 0px;
    opacity: 0;
    padding: 0 30px;
    z-index: 9999;


    .drop-down-box {
      margin: 0 30px;
      display: flex;
      flex-direction: column;
      align-items: center;

      &:hover{
        color: $color;
        cursor: pointer;
      }

      .img-warp {
        width: 60px;
        height: 60px;

        img {
          width: 60px;
          height: 60px;
        }
      }


    }

  }
}
// 导航
header {
  width: 100%;

  .header-container {
    height: 132px;
    @extend .warp;
    @extend .header;

    .logo1 {
      @extend .logo;
    }

    .index {
      margin: 20px;
      padding: 8px 0;

      &:hover{
        border-bottom: 1px solid $color;
        color: $color;
        cursor: pointer;
        }
    }

    .mainnav {
      display: flex;
      // flex: 1;
      align-items: center;

      .tag {
        margin: 20px;
        @extend .menus;
      }
    }

   .inp-warp {
      border-bottom: 1px solid #e7e7e7;
      height: 32px;
      line-height: 32px;

    .inp {
      width: 170px;
      margin-left: 3px;
      border: none;
      outline: none;
    }
    .icon-search {
      vertical-align: middle;
    }
    }

    .car {
      margin-top: 10px;
      margin-right: 40px;
      margin: 0 15px;
      cursor: pointer;
    }
  }
}
// 吸顶
.ceiling {
  width: 100%;
  height: 100px;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  opacity: 0;
  height: 0;
  transition: all .1s;
  min-width: 1240px;
  z-index: 999999;

  .ceiling-container {
    height: 100px;
    @extend .warp;
    @extend .header;

    .logo1 {
      @extend .logo;
    }

    .index {
      margin: 20px;
      padding: 8px 0;

      &:hover{
        border-bottom: 1px solid $color;
        color: $color;
        cursor: pointer;
        }
    }

    .mainnav {
      display: flex;
      // flex: 1;
      align-items: center;

      .tag {
        margin: 20px;
        @extend .menus;
      }
    }

    .brand {

      .line {
          color: #5bb79c;
        }

      span {
        margin-left: 50px;

        &:hover{
        border-bottom: 1px solid $color;
        color: $color;
        cursor: pointer;
        }
      }
    }
  }
}

.height1 {
  height: 0px;
}
.height2 {
  opacity: 1;
  height: 100px;
}
// 购物车下拉框
.car-warp {
  width: 400px;
  height: 400px;
  display: flex;
  flex-direction: column;


  .car-main {
    flex: 1;
    overflow: auto;
    padding: 16px;

    .car-item {
      display: flex;
      border-bottom: 1px solid #ccc;
      padding-bottom: 16px;
      align-items: center;

      .car-img {
      width: 80px;
      height: 80px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .details {
        display: flex;
        flex: 1;
        flex-direction: column;
        // justify-content: space-between;
        align-content: space-between;
        margin: 16px;

        div:nth-child(1) {
          width: 100%;
          /* 有限的空间才能有溢出的可能 */
          overflow: hidden;
          -webkit-line-clamp: 2;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          word-break: break-all;
          line-break: anywhere;
        }

        span {
          color: #ccc;
        }
      }

      .price {
        text-align: center;

        div:nth-child(1) {
          color: #bf4e49;
        }

        div:nth-child(2) {
          color: #989999;
        }
      }

      .close {
        margin: 0 8px;
        font-size: 16px;
        opacity: 0;
        transition: all .5s;
      }

      &:hover {
        cursor: pointer;

        .close {
          opacity: 1;
        }

      }
    }

  }

  .car-footer {
    height: 66px;
    display: flex;
    padding: 0 16px;
    justify-content: space-between;
    align-items: center;
    background-color: #f8f8f8;

    .in-all {
      flex: 1;

      div:nth-child(1) {
        color: #989999;
      }

      div:nth-child(2) {
        color: #bf4e49;
      }
    }

    .car-btn {
      background-color: #eaf9f6;
      color: #5bb79c;
      font-size: 14px;
    }
  }
}

.router-view {
  width: 100%;
}


</style>
